{% extends "base.html" %}
{% block title %}services{% endblock %}
{% block loadbalancer %}layui-nav-itemed{% endblock %}
{% block loadbalancer_service %}layui-this{% endblock %}
{% block body %}
    <span class="layui-breadcrumb span-float" lay-separator="/">
      <a href="/">首页</a>
      <a href='{% url "loadbalancer:service" %}'>负载均衡</a>
      <a><cite>Services</cite></a>
   </span>
    <div class="demoTable" style="margin-top: 10px; margin-left: 10px;">
        <a href="{% url 'loadbalancer:service_create' %}" class="layui-btn" style="color: white">创建</a>
        搜索名称：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <table class="layui-hide" id="LAY_table" lay-filter="k8s"></table>

{% endblock %}
{% block js %}

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">YAML</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        layui.use('table', function () {
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table'
                , url: '{% url "service_api" %}?namespace=' + namespace
                , cols: [[
                    {checkbox: true, fixed: true}
                    , {field: 'name', title: '名称', sort: true}
                    , {field: 'namespace', title: 'NAMESPACE'}
                    , {field: 'type', title: '类型', sort: true}
                    , {field: 'cluster_ip', title: 'CLUSTER IP'}
                    , {field: 'external_ip', title: 'EXTERNAL IP'}
                    , {field: 'ports', title: '端口/协议'}
                    , {field: 'labels', title: 'SELECTOR', templet: labelsFormat}
                    , {field: 'create_time', title: '创建时间', sort: true}
                    , {fixed: 'right', title: '操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
                ]]
                , id: 'testReload'
                , page: true
            });

            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');
                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            search_key: demoReload.val()
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //触发单元格工具事件 删除和查看
            table.on('tool(k8s)', function (obj) { // 双击 toolDouble
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('真的删除' + data.name + "吗？", function (index) {
                        const csrf_token = $('[name = "csrfmiddlewaretoken"]').val();
                        $.ajax({
                            url: "{% url 'service_api' %}?namespace=" + namespace,
                            type: "delete",
                            data: data,
                            headers: {"X-CSRFToken": csrf_token}, // 需要将csrf 提交到token 中，delete方法需要加到header中，不能提交到data中
                            success: function (res) {
                                if (res.code === 0) {
                                    obj.del();
                                    layer.msg(res.msg, {icon: 6});
                                } else {
                                    {#layer.msg(res.msg, {icon: 5});#}
                                    layer.msg('<strong>error code: </strong>' + res.code + ', <strong>error message: </strong>' + res.msg, {icon: 5})
                                }
                            }, error: function () {
                                layer.msg('服务接口异常', {icon: 5});
                            }
                        })
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                          title: 'YAML查看',
                          type: 2,
                          area: ['80%', '80%'],
                          content: '{% url "ace_edit" %}?resource=service' + '&namespace=' + data["namespace"] + '&name=' + data["name"]
                    });
                }
            });
        });
    </script>
{% endblock %}